<template>
    <div>
        <Modal width="900"
               v-model="modal.editClassFlag"
               @on-cancel="cancel"
               title="绑定教师">
            <div class="modalDiv"></div>
            <Form ref="class" :model="modal.course" inline :label-width="100">
                <FormItem prop="classId" label="班号">
                    <Input class="myform" v-model="classDO.classId" clearable/>
                </FormItem>
                <FormItem prop="teacherId" label="教师">
                    <Select v-model="classDO.teacherId" clearable class="myform">
                        <Option  v-for="item in list" :value="item.teacherId" :key="item.teacherId">{{item.name}}</Option>
                    </Select>
                    <Button class="bing" type="info" @click="bingTeacher">绑定</Button>
                </FormItem>
            </Form>
            <Table context-menu
                   show-context-menu
                   size="small"
                   :loading="loading"
                   :columns="columns"
                   @on-contextmenu="handleContextMenu"
                   :data="data">
                <template slot="contextMenu">
                    <div>
                        <DropdownItem @click.native="editRow">
                            <Icon type="md-build"/>
                            完善
                        </DropdownItem>
                        <DropdownItem @click.native="deleteRow" style="color: #ed4014">
                            <Icon type="md-trash"/>
                            删除
                        </DropdownItem>
                    </div>
                </template>
            </Table>
        </Modal>
        <class-address :modal="modalAddress"/>
    </div>
</template>

<script>

    import classAddress from "@c/basicData/editAddress";

    export default {
        components:{
            classAddress
        },
        name: "editClass",
        props: {
            modal: {
                editClassFlag: false,
                course:{}
            }
        },

        data() {
            return {
                modalAddress:{
                    classAddressFlag:false,
                    row:{}
                },
                loading: false,
                classDO:{},
                list:[],
                columns:[
                    {
                        type: 'index',
                        width: 70,
                        title: '序号',
                        align: 'center'
                    },
                    {
                        title: '开课班号',
                        sortable:true,
                        key:'classId'
                    },
                    {
                        title: '课程名称',
                        sortable:true,
                        key:'courseName'
                    },
                    {
                        title: '教师名称',
                        sortable:true,
                        key:'teacherName'
                    }
                ],
                data: [],
            }
        },
        methods: {
            bingTeacher(){
                this.loading = true
                this.classDO.courseId = this.modal.course.courseId
                this.http.post('/course/bingTeacher',this.qs.parse(this.classDO)).then(res =>{
                    if (res) {
                        this.$Message.success('添加成功！');
                        //this.modal.editClassFlag = false;
                        this.getCourseTeacher();
                        this.loading = false;
                        }
                })
            },
            getTeacher(){
              this.http.get(`/teacher/getTeacherBycollegeId/${this.modal.course.collegeId}`).then(res=>{
                  this.list = res.data.filter(f=>!this.modal.course.list.map(m=>{
                      return m.teacherId
                  }).includes(f.teacherId))
              })
            },
            /**
             * 绑定之后刷新
             */
            getCourseTeacher(){
                this.http.get(`/course/getCourseTeacherByCourseId/${this.modal.course.courseId}`).then(res=>{
                    this.data = res.data
                })
            },

            deleteRow(){
                this.loading = true
                this.http.delete(`/course/deleteClass/${this.modalAddress.row.classId}`).then(res=>{
                    if (res) {
                        this.$Message.success('删除成功！');
                        this.getCourseTeacher();
                        this.loading = false;
                    }
                })
            },

            handleContextMenu(row) {
                this.modalAddress.row = row
            },
            editRow(){
                if(this.modalAddress.row.classId != 0){
                    this.modalAddress.classAddressFlag = true
                }else {
                    this.$Message.error('请选添加班级！');
                }

            },
            cancel() {

            },
        },
        watch:{
            'modal.editClassFlag'(e){
              if(e){
                  this.data = this.modal.course.list
                  this.getTeacher()

              }
            }
        },
    }
</script>

<style scoped>
    .myform {
        width: 280px;
    }
    .bing{
        margin-left: 10px;
    }
</style>